<template>

  <div class="allWrap">
    <transition name="fade">
    <div class="loadingBlock" v-show="showLoading">
      <div class="lds-css ng-scope" style="width: 200px; height: 200px;">
        <div style="width:100%;height:100%" class="lds-pacman">
          <div>
            <div></div>
            <div></div>
            <div></div>
          </div>
          <div>
            <div></div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
    </transition>
    <div class="index-root">
      <div class="index-scroll">
        <div>
            <v-header v-if="shop" :shop="shop"></v-header>
        </div>
        <vm-tabs v-model="tabDefault" navItemPosition="center" graph="line">
          <vm-tab-pane label="商品" name="menu"><ShopMenuView v-if="shop" :shop="shop" @closeLoadingBlock = "closeLoadingBlock"></ShopMenuView></vm-tab-pane>
          <vm-tab-pane label="评价" name="rate"><ShopRate :shopID="shopID"></ShopRate></vm-tab-pane>
          <vm-tab-pane label="店铺" name="shop-info"><ShopInfo v-if="shop" :shop="shop"></ShopInfo></vm-tab-pane>
        </vm-tabs>

      </div>
    </div>
  </div>
</template>

<script>
  const ERROR_STATUS_OK = 0;
  import ShopAPI from '../exchange/shopAPI.js';
  import Header from '../components/shopDetail/ShopHeader'
  import ShopMenuView from '../components/shopDetail/ShopMenuView'
  import ShopRate from '../components/shopDetail/ShopRate'
  import ShopInfo from '../components/shopDetail/ShopInfo'
  import {VmTabs, VmTabPane, VmTabBar, VmTabNav} from 'vue-multiple-tabs'

  export default {
    name: 'ShopDetail',
    data () {
      return {
        shopID: this.$route.params.id,
        shop: null,
        showLoading: true,
        tabDefault: 'menu'
      }
    },
    components: {
      'v-header': Header,
      'vm-tabs': VmTabs,
      'vm-tab-pane': VmTabPane,
      'vm-tab-bar': VmTabBar,
      'vm-tab-nav': VmTabNav,
      ShopMenuView,
      ShopRate,
      ShopInfo
    },
    methods: {
      closeLoadingBlock: function () {
        this.showLoading = false;
      }
    },
    beforeMount: function () {
      ShopAPI.getShopInfo(this.shopID).then(res => {
          if (res.errno === ERROR_STATUS_OK) {
            this.shop = res.data;
            document.title = this.shop.name;
          }
      })
    }
  }
</script>
<style>
  /** loadingBlock start **/
  .loadingBlock{
    position:fixed;
    width:100vw;
    opacity: 1;
    transition: all 0.5s linear;
    height:100vh;
    z-index:999;
    background:#fff;
  }
  .lds-css{width:200px;height:200px;position:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-100px;}
  @keyframes lds-pacman-1 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    50% {
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
    100% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  }
  @-webkit-keyframes lds-pacman-1 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    50% {
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }
    100% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  }
  @keyframes lds-pacman-2 {
    0% {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
    50% {
      -webkit-transform: rotate(225deg);
      transform: rotate(225deg);
    }
    100% {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
  }
  @-webkit-keyframes lds-pacman-2 {
    0% {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
    50% {
      -webkit-transform: rotate(225deg);
      transform: rotate(225deg);
    }
    100% {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
  }
  @keyframes lds-pacman-3 {
    0% {
      -webkit-transform: translate(190px, 0);
      transform: translate(190px, 0);
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    100% {
      -webkit-transform: translate(70px, 0);
      transform: translate(70px, 0);
      opacity: 1;
    }
  }
  @-webkit-keyframes lds-pacman-3 {
    0% {
      -webkit-transform: translate(190px, 0);
      transform: translate(190px, 0);
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    100% {
      -webkit-transform: translate(70px, 0);
      transform: translate(70px, 0);
      opacity: 1;
    }
  }
  .lds-pacman {
    position: relative;
  }
  .lds-pacman > div:nth-child(2) div {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 120px;
    height: 60px;
    border-radius: 120px 120px 0 0;
    background: #f2b736;
    -webkit-animation: lds-pacman-1 1s linear infinite;
    animation: lds-pacman-1 1s linear infinite;
    -webkit-transform-origin: 60px 60px;
    transform-origin: 60px 60px;
  }
  .lds-pacman > div:nth-child(2) div:nth-child(2) {
    -webkit-animation: lds-pacman-2 1s linear infinite;
    animation: lds-pacman-2 1s linear infinite;
  }
  .lds-pacman > div:nth-child(1) div {
    position: absolute;
    top: 92px;
    left: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #6ed527;
    -webkit-animation: lds-pacman-3 1s linear infinite;
    animation: lds-pacman-3 1s linear infinite;
  }
  .lds-pacman > div:nth-child(1) div:nth-child(1) {
    -webkit-animation-delay: -0.67s;
    animation-delay: -0.67s;
  }
  .lds-pacman > div:nth-child(1) div:nth-child(2) {
    -webkit-animation-delay: -0.33s;
    animation-delay: -0.33s;
  }
  .lds-pacman > div:nth-child(1) div:nth-child(3) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
  }
  .lds-pacman {
    width: 200px !important;
    height: 200px !important;
    -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
    transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
  }
  /** loadingBlock end **/
  .vm-tabs__content{
    bottom:0;
    height: 90%;
    height:-moz-calc(100vh - 127px);
    height:-webkit-calc(100vh - 127px);
    height: calc(100vh - 127px);
    width:100%;
  }
  .vm-tabs .vm-tabs__header{margin-bottom:0;border-bottom:1px solid #ddd;}
  .vm-tabs__nav-scroll{width:100%;float:none;}
  .vm-tabs__nav{float:none;width:100%;    display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;}
  .vm-tabs__item{position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;}
    .vm-tabs__item:hover{color: #3190e8;}
    .vm-tabs__item.is-active{color: #3190e8;}
    .vm-tabs__active.is-line{background-color:#2395ff}
  html{background-color:#F5F5F5;}
  [v-cloak] {
      visibility: hidden
    }

    *,
     ::after,
     ::before {
      box-sizing: inherit;
      -webkit-tap-highlight-color: transparent
    }

    html {
      box-sizing: border-box;
      background-color: #f5f5f5;
      color: #333;
      font-size: 30px;
      font-family: 'Helvetica Neue', Tahoma, Arial, PingFangSC-Regular, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
      line-height: 1.2;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-font-smoothing: antialiased;
      -ms-touch-action: manipulation;
      touch-action: manipulation;
      -webkit-text-size-adjust: none;
      -ms-text-size-adjust: none;
      text-size-adjust: none
    }

    body,
    button,
    dd,
    dl,
    ol,
    ul {
      margin: 0;
      padding: 0
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
      margin: 0;
    }

    ol,
    ul {
      list-style: none
    }

    a {
      outline: 0;
      color: inherit;
      text-decoration: none
    }

    a,
    img {
      -webkit-touch-callout: none
    }

    button,
    input,
    select,
    textarea {
      outline: 0;
      border: none;
      font-size: inherit;
      font-family: inherit
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
      margin: 0;
      font-weight: 400
    }

    img {
      max-width: 100%
    }

    textarea {
      resize: none
    }

    select {
      background-color: transparent;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none
    }

    input[type=button],
    input[type=reset],
    input[type=submit] {
      -webkit-appearance: button;
      -moz-appearance: button;
      appearance: button
    }

    input:-webkit-autofill {
      box-shadow: 0 0 0 100px #fff inset
    }

    .shellAnimation {
      -webkit-animation: shellPulse 1s infinite;
      animation: shellPulse 1s infinite
    }

    @-webkit-keyframes shellPulse {
      0% {
        opacity: 1
      }
      50% {
        opacity: .6
      }
      100% {
        opacity: 1
      }
    }

    @keyframes shellPulse {
      0% {
        opacity: 1
      }
      50% {
        opacity: .6
      }
      100% {
        opacity: 1
      }
    }
    /**endof common**/

    .login-3g0xq_0 {
      margin-top: .173333rem;
      font-size: .32rem;
      color: #666;
      line-height: .426667rem
    }

    .login-3g0xq_0 .login-1R6eq_0 {
      font-weight: 700;
      color: #0086ff
    }

    .login-3g0xq_0 .login-2ZRSW_0 {
      color: #151515
    }

    .index-2KSr4_0 {
      background: #fff;
      padding: .266667rem
    }

    .index-2KSr4_0 .index-1xs7E_0 {
      border: 1px solid #f6e4b3
    }

    .index-2ujkn_0 {
      width: .453333rem;
      height: .32rem;
      margin-right: .213333rem;
      -webkit-box-flex: 0;
      -webkit-flex: none;
      -ms-flex: none;
      flex: none
    }

    .index-143xJ_0 {
      white-space: nowrap
    }

    .index-143xJ_0,
    .index-ybh9R_0 {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center
    }

    .index-ybh9R_0 {
      height: .8rem;
      width: .8rem;
      position: absolute;
      top: 50%;
      right: .08rem;
      margin-top: -.4rem;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center
    }

    .index-ybh9R_0 .index-3n0MB_0 {
      width: .32rem;
      height: .32rem
    }

    .index-1xs7E_0 {
      background-color: #fff8d9;
      padding: .32rem .88rem .32rem .373333rem;
      position: relative;
      border-radius: 2px
    }

    .index-1XLeN_0 {
      font-size: .373333rem;
      color: #333
    }

    .index-Y6TFR_0 {
      background-color: #fff;
      border-radius: .106667rem;
      width: 8.533333rem;
      padding-top: .64rem;
      text-align: center
    }

    .index-1PbDw_0 {
      color: #0086ff
    }

    .index-39KDe_0 {
      margin: 0 .24rem;
      font-size: .4rem;
      color: #666;
      line-height: .56rem;
      text-align: left
    }

    .index-39KDe_0 strong {
      color: #151515;
      font-weight: 400
    }

    .index-2ozke_0 {
      font-size: .48rem;
      color: #333;
      font-weight: 700
    }

    .index-128L3_0 {
      padding: .373333rem .426667rem
    }

    .index-27pcR_0 {
      color: #fff;
      -webkit-appearance: none;
      outline: none;
      font-size: .426667rem;
      background-color: #4cd964;
      height: 1.173333rem;
      width: 7.68rem;
      display: block;
      margin: .373333rem auto;
      border-radius: .053333rem;
      font-weight: 700
    }

    .index-2nCVh_0 {
      height: 1.253333rem;
      line-height: 1.253333rem;
      background: #eee;
      border-bottom-right-radius: .106667rem;
      border-bottom-left-radius: .106667rem
    }

    .index-2nCVh_0,
    .index-5hi4d_0 {
      color: #999;
      font-size: .346667rem
    }

    .msite-shop-center[] {
      position: fixed;
      width: 100%;
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%)
    }

    .FixedBar-wrapper_2ylMXSJ {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 2333;
      width: 100%
    }

    .FixedBar-enter-active_2B20loD {
      -webkit-transition: opacity 1s;
      transition: opacity 1s
    }

    .FixedBar-leave-active_pkF41EV {
      -webkit-transition: opacity .5s;
      transition: opacity .5s
    }

    .FixedBar-enter_2gRJgB2,
    .FixedBar-leave-active_pkF41EV {
      opacity: 0
    }

    .LoadMore-wrapper_3WFhfHy {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      min-height: 1.066667rem;
      background-color: #fff;
      color: #555;
      font-size: .346667rem
    }

    .LoadMore-icon_cLUJieG {
      display: block;
      margin-right: .2rem;
      width: .4rem;
      height: .4rem;
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      -webkit-animation: LoadMore-loading_1ZyT4BS 1s linear infinite;
      animation: LoadMore-loading_1ZyT4BS 1s linear infinite
    }

    @-webkit-keyframes LoadMore-loading_1ZyT4BS {
      to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
      }
    }

    @keyframes LoadMore-loading_1ZyT4BS {
      to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
      }
    }

    .SwitchTab-wrapper_1K5DMvd {
      position: relative
    }

    .SwitchTab-transition_1naNOOT {
      -webkit-transition: opacity .5s cubic-bezier(.55, 0, .1, 1), -webkit-transform .5s cubic-bezier(.55, 0, .1, 1);
      transition: opacity .5s cubic-bezier(.55, 0, .1, 1), -webkit-transform .5s cubic-bezier(.55, 0, .1, 1);
      transition: opacity .5s cubic-bezier(.55, 0, .1, 1), transform .5s cubic-bezier(.55, 0, .1, 1);
      transition: opacity .5s cubic-bezier(.55, 0, .1, 1), transform .5s cubic-bezier(.55, 0, .1, 1), -webkit-transform .5s cubic-bezier(.55, 0, .1, 1)
    }

    .SwitchTab-next-enter-active_X56hiu7,
    .SwitchTab-next-enter___6xIN9,
    .SwitchTab-next-leave-active_2bk9nNX,
    .SwitchTab-next-leave_3jKLHuc,
    .SwitchTab-prev-enter-active_19mgJnf,
    .SwitchTab-prev-enter_12e1KZz,
    .SwitchTab-prev-leave-active_h6Ak61K,
    .SwitchTab-prev-leave_HOy2tpF {
      position: absolute
    }

    .SwitchTab-next-leave-active_2bk9nNX,
    .SwitchTab-prev-enter_12e1KZz {
      opacity: 0;
      -webkit-transform: translate(-.4rem);
      transform: translate(-.4rem)
    }

    .SwitchTab-next-enter___6xIN9,
    .SwitchTab-prev-leave-active_h6Ak61K {
      opacity: 0;
      -webkit-transform: translate(.4rem);
      transform: translate(.4rem)
    }

    .TouchBar-wrapper_3AxAZxu {
      position: relative;
      width: 100%
    }

    .TouchBar-list_1f4YgNb {
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
      line-height: 0;
      -webkit-overflow-scrolling: touch
    }

    .TouchBar-list_1f4YgNb li {
      display: inline-block;
      overflow: hidden
    }

    .TouchBar-list_1f4YgNb::-webkit-scrollbar {
      display: none
    }

    .TouchBar-align_1wyOisV {
      line-height: 0
    }

    .TouchBar-align_1wyOisV ul {
      position: static;
      display: inline-block
    }

    .Popup-mask {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 7777;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      width: 100%;
      width: 100vw;
      height: 100%;
      height: 100vh;
      -webkit-transition-property: opacity;
      transition-property: opacity
    }

    .Popup-wrapper {
      position: relative;
      -webkit-transition-property: -webkit-transform;
      transition-property: -webkit-transform;
      transition-property: transform;
      transition-property: transform, -webkit-transform
    }

    .Popup-close {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 233;
      padding: .333333rem
    }

    .Popup-close svg {
      display: block;
      width: .373333rem;
      height: .373333rem;
      fill: #bbb
    }

    .Popup-center-wrapper {
      margin-top: -20%
    }

    .Popup-mask-enter,
    .Popup-mask-leave-active {
      opacity: 0
    }

    .Popup-mask-enter .Popup-center-wrapper,
    .Popup-mask-leave-active .Popup-center-wrapper {
      -webkit-transform: scale(.8);
      transform: scale(.8)
    }

    .Popup-mask-enter .Popup-bottom-wrapper,
    .Popup-mask-leave-active .Popup-bottom-wrapper {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0)
    }

    .Popup-mask-enter .Popup-top-wrapper {
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0)
    }

    .Popup-mask-enter .Popup-bottom-wrapper {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0)
    }

    .Dialogue-wrapper {
      overflow: hidden;
      padding: .533333rem .4rem;
      width: 8.533333rem;
      border-radius: .106667rem;
      background: #fff
    }

    .Dialogue-title {
      margin: .16rem auto;
      color: #333;
      text-align: center;
      font-weight: 700;
      font-size: .48rem;
      line-height: .666667rem
    }

    .Dialogue-content {
      color: #666;
      font-size: .346667rem;
      line-height: .533333rem
    }

    .Dialogue-content b {
      color: #333;
      font-weight: 700
    }

    .Dialogue-buttons {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
      margin-top: .346667rem
    }

    .Dialogue-buttons button {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      display: block;
      width: 0;
      padding: 0;
      height: 1.173333rem;
      border: 1px solid #ccc;
      border-radius: .053333rem;
      background: none;
      color: #666;
      font-size: .426667rem
    }

    .Dialogue-buttons button:active {
      opacity: .7
    }

    .Dialogue-buttons .Dialogue-highlight {
      border: 0 none;
      background: #3190e8;
      color: #fff
    }

    .Dialogue-buttons button+button {
      margin-left: .266667rem
    }

    .MessageDialog-box {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
      margin-top: .2rem;
      padding: 0 .426667rem;
      height: 1.2rem;
      border: 1px solid #ddd;
      border-radius: .053333rem;
      font-size: .4rem
    }

    .MessageDialog-box input {
      -webkit-box-flex: 1;
      -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      padding: .133333rem 0;
      height: .8rem;
      color: #333;
      line-height: .533333rem
    }

    .MessageDialog-box input::-webkit-input-placeholder {
      color: #ccc
    }

    .MessageDialog-box input::-moz-placeholder {
      color: #ccc
    }

    .MessageDialog-box input:-ms-input-placeholder {
      color: #ccc
    }

    .MessageDialog-box input::placeholder {
      color: #ccc
    }

    .MessageToast-wrapper {
      position: fixed;
      bottom: 2.56rem;
      left: 50%;
      z-index: 9999;
      padding: .266667rem .533333rem;
      border-radius: .533333rem;
      background: rgba(0, 0, 0, .6);
      color: #fff;
      font-size: .32rem;
      line-height: 1.2;
      -webkit-transition: opacity .5s;
      transition: opacity .5s;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      pointer-events: none
    }

    .MessageToast-enter,
    .MessageToast-leave-active {
      opacity: 0
    }

    .ActionSheet-sheet {
      width: 10rem;
      background-color: #f5f5f5;
      -webkit-transition: -webkit-transform .3s ease-out;
      transition: -webkit-transform .3s ease-out;
      transition: transform .3s ease-out;
      transition: transform .3s ease-out, -webkit-transform .3s ease-out;
      -webkit-transform: translateZ(0);
      transform: translateZ(0)
    }

    .ActionSheet-list {
      margin-bottom: .266667rem
    }

    .ActionSheet-item {
      border-bottom: .013333rem solid #f2f2f2
    }

    .ActionSheet-item:active {
      background-color: #f8f8f8
    }

    .ActionSheet-button,
    .ActionSheet-item {
      display: block;
      width: 100%;
      height: 1.466667rem;
      background-color: #fff;
      color: #3e3e3e;
      text-align: center;
      font-size: .48rem;
      line-height: 1.466667rem
    }

    .ActionSheet-button:active,
    .ActionSheet-item:active {
      opacity: .7
    }

    .Load-wrapper {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-transition: opacity .3s;
      transition: opacity .3s
    }

    .Load-wrapper.Load-fixed {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 8888;
      width: 100%;
      height: 100%
    }

    .Load-enter-active,
    .Load-enter {
      opacity: 1
    }

    .Load-leave-active {
      opacity: 0
    }

    .Load-loading-main {
      position: relative;
      margin-top: 1em;
      width: 2em;
      height: 2em;
      font-size: .666667rem
    }

    .Load-loading-icon {
      position: absolute;
      width: 2em;
      height: 2em;
      z-index: 5;
      background: url() no-repeat;
      background-size: auto 100%;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      background-position-x: 0;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: pointer;
      -webkit-animation: Load-Gump 1.5s normal infinite steps(43);
      animation: Load-Gump 1.5s normal infinite steps(43)
    }

    @-webkit-keyframes Load-Gump {
      0% {
        background-position-x: 0
      }
      to {
        background-position-x: 100%
      }
    }

    @keyframes Load-Gump {
      0% {
        background-position-x: 0
      }
      to {
        background-position-x: 100%
      }
    }

    .NoDataTip-wrapper {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center
    }

    .NoDataTip-wrapper img {
      display: block;
      width: 5.333333rem
    }

    .NoDataTip-wrapper h3 {
      margin: .333333rem 0 .266667rem;
      color: #6a6a6a;
      font-weight: 400;
      font-size: .453333rem
    }

    .NoDataTip-wrapper p {
      margin: 0 0 .333333rem;
      color: #999;
      font-size: .306667rem
    }

    .NoDataTip-wrapper button {
      padding: .266667rem;
      min-width: 3.2rem;
      border: none;
      border-radius: .053333rem;
      background-color: #56d176;
      color: #fff;
      text-align: center;
      font-size: 1.2em;
      font-family: inherit
    }

    .NoDataTip-wrapper.NoDataTip-fixed {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 8866;
      padding: 0 0 10%;
      width: 100%;
      height: 100%;
      background: #fff
    }

    .BackTop-wrapper {
      position: fixed;
      right: .4rem;
      bottom: 2rem;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      width: 1.133333rem;
      height: 1.133333rem;
      border: .013333rem solid #999;
      border-radius: 50%;
      background: #fff;
      -webkit-transition: opacity .3s;
      transition: opacity .3s
    }

    .BackTop-icon {
      display: block;
      width: .533333rem;
      height: .533333rem;
      fill: #999
    }

    .BackTop-enter,
    .BackTop-leave-active {
      opacity: 0
    }

    .ElemeHeader-root {
      height: 1.173333rem
    }

    .ElemeHeader-wrapper {
      position: relative;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
      width: 100%;
      height: 1.173333rem;
      color: #fff;
      font-size: .48rem;
      background: #2395ff
    }

    .ElemeHeader-wrapper.ElemeHeader-fixed {
      position: fixed;
      top: 0;
      left: 0
    }

    .ElemeHeader-gradientBg_3 {
      background-image: -webkit-linear-gradient(left, #0af, #0085ff);
      background-image: linear-gradient(90deg, #0af, #0085ff)
    }

    .ElemeHeader-left {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      width: 1.173333rem;
      height: 1.173333rem
    }

    .ElemeHeader-left svg {
      display: block;
      width: .586667rem;
      height: .586667rem
    }

    .ElemeHeader-center {
      position: absolute;
      top: 0;
      left: 50%;
      height: 1.173333rem;
      max-width: 50%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 700;
      font-size: 1em;
      line-height: 1.173333rem;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%)
    }

    .index-wrapper {
      height: 1.6rem
    }

    .HongbaoList-wrapper {
      margin-bottom: .266667rem;
      border: none;
      border-radius: .08rem;
      box-shadow: 0 .026667rem .08rem rgba(0, 0, 0, .1);
      background: #fff;
      position: relative
    }

    .HongbaoList-descriptions {
      color: #666;
      font-size: .266667rem;
      line-height: .32rem
    }

    .HongbaoList-descriptions>li {
      margin-bottom: .08rem
    }

    .HongbaoList-extra {
      position: relative;
      padding: .266667rem .4rem;
      border-top: .013333rem dashed #ddd;
      background: #fcfcfc;
      color: #666;
      min-height: 1.013333rem;
      border-bottom-left-radius: .053333rem;
      border-bottom-right-radius: .053333rem
    }

    .HongbaoList-extra:after,
    .HongbaoList-extra:before {
      position: absolute;
      top: -.03128rem;
      top: -.146667rem;
      z-index: 10;
      display: block;
      width: .03128rem;
      width: .146667rem;
      height: .062573rem;
      height: .293333rem;
      background: #f4f4f4;
      content: ""
    }

    .HongbaoList-extra:before {
      left: -.00568rem;
      left: -.026667rem;
      border-right: .013333rem solid #ddd;
      border-top-right-radius: .03128rem;
      border-top-right-radius: .146667rem;
      border-bottom-right-radius: .03128rem;
      border-bottom-right-radius: .146667rem
    }

    .HongbaoList-extra:after {
      right: -.00568rem;
      right: -.026667rem;
      border-left: .013333rem solid #ddd;
      border-top-left-radius: .03128rem;
      border-top-left-radius: .146667rem;
      border-bottom-left-radius: .03128rem;
      border-bottom-left-radius: .146667rem
    }

    .HongbaoList-extraItem {
      margin: .053333rem 0;
      font-size: .266667rem;
      line-height: .32rem;
      margin-bottom: .08rem;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-text-size-adjust: none;
      -ms-text-size-adjust: none;
      text-size-adjust: none
    }

    .HongbaoList-unavailable {
      color: #666
    }

    .HongbaoList-unavailableTip {
      color: #ff0034;
      font-size: .266667rem;
      line-height: .32rem;
      margin-bottom: .08rem
    }

    .HongbaoList-unavailableTip svg {
      width: .266667rem;
      height: .266667rem;
      margin-right: .106667rem
    }

    .HongbaoList-shareItem {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between
    }

    .HongbaoList-shareItem .HongbaoList-shareBtn {
      color: #ff0025;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center
    }

    .HongbaoList-shareItem .HongbaoList-shareBtn svg {
      width: .266667rem;
      height: .266667rem;
      margin-right: .08rem
    }

    .HongbaoList-disabled .HongbaoList-extraItem {
      color: #ccc
    }

    .HongbaoMain-main_56Zi81W {
      position: relative;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      padding: .533333rem 0 .426667rem
    }

    .HongbaoMain-newBadge {
      position: absolute;
      top: 0;
      left: 0;
      height: .693333rem;
      width: .693333rem;
      background: url() no-repeat;
      background-size: cover;
      color: #fff;
      font-size: .266667rem
    }

    .HongbaoMain-newBadge p {
      display: inline-block;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      margin-top: .053333rem;
      margin-left: .106667rem
    }

    .HongbaoMain-descriptions {
      -webkit-text-size-adjust: none;
      -ms-text-size-adjust: none;
      text-size-adjust: none
    }

    .HongbaoMain-status {
      position: absolute;
      top: .266667rem;
      right: .32rem;
      display: block;
      width: 1.6rem;
      height: 1.6rem;
      opacity: .6
    }

    .HongbaoMain-select {
      display: block;
      width: .533333rem;
      height: .533333rem;
      fill: #eee
    }

    .HongbaoMain-selected {
      fill: #4cd964
    }

    .HongbaoMain-amount {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 0;
      -webkit-flex: 0 0 3.013333rem;
      -ms-flex: 0 0 3.013333rem;
      flex: 0 0 3.013333rem;
      -webkit-box-align: baseline;
      -webkit-align-items: baseline;
      -ms-flex-align: baseline;
      align-items: baseline;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      width: 3.013333rem;
      color: #ff0025
    }

    .HongbaoMain-amount span:first-child {
      margin-right: .08rem;
      font-size: .4rem
    }

    .HongbaoMain-amount span:nth-child(2) {
      font-weight: 700;
      font-size: .746667rem
    }

    .HongbaoMain-amount span:nth-child(3) {
      font-weight: 700;
      font-size: .533333rem
    }

    .HongbaoMain-sumCondition {
      text-align: center;
      font-size: .293333rem;
      color: #666
    }

    .HongbaoMain-name {
      margin-bottom: .2rem;
      font-weight: 700;
      font-size: .4rem;
      line-height: .533333rem;
      color: #333
    }

    .HongbaoMain-nameText {
      display: inline-block;
      vertical-align: middle;
      max-width: 3.773333rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .HongbaoMain-info {
      padding-left: .08rem;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      display: block;
      width: 0
    }

    .HongbaoMain-action {
      padding-right: .4rem;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center
    }

    .HongbaoMain-actionTip_25B6Gb5 {
      color: #ff0025;
      font-size: .293333rem;
      text-align: center;
      margin-bottom: .106667rem;
      line-height: .346667rem
    }

    .HongbaoMain-useBtn {
      border: .013333rem solid #ff0025;
      border-radius: 1.333333rem;
      width: 1.36rem;
      height: .506667rem;
      color: #ff0025;
      font-size: .266667rem;
      font-weight: 700;
      padding: 0;
      background-color: transparent;
      white-space: nowrap
    }

    .HongbaoMain-disabled .HongbaoMain-amount,
    .HongbaoMain-disabled .HongbaoMain-descriptions,
    .HongbaoMain-disabled .HongbaoMain-info,
    .HongbaoMain-disabled .HongbaoMain-name,
    .HongbaoMain-disabled .HongbaoMain-sumCondition {
      color: #ccc
    }

    .HongbaoMain-disabled .HongbaoMain-newBadge {
      background-image: url()
    }

    button {
      margin: 0;
      padding: 0
    }

    button,
    input {
      outline: none;
      border: none;
      font-size: inherit;
      font-family: inherit
    }

    @-webkit-keyframes Verify-showAlert {
      0% {
        -webkit-transform: scale(0);
        transform: scale(0)
      }
      to {
        -webkit-transform: scale(1);
        transform: scale(1)
      }
    }

    @keyframes Verify-showAlert {
      0% {
        -webkit-transform: scale(0);
        transform: scale(0)
      }
      to {
        -webkit-transform: scale(1);
        transform: scale(1)
      }
    }

    .Verify-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 999;
      background: rgba(0, 0, 0, .4);
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center
    }

    .Verify-message-box {
      width: 9.066667rem;
      background: #fff;
      border-radius: .133333rem;
      -webkit-animation: Verify-showAlert .3s;
      animation: Verify-showAlert .3s;
      padding: .666667rem .613333rem;
      position: relative
    }

    .Verify-message-box .Verify-close {
      position: absolute;
      right: .333333rem;
      top: .333333rem;
      width: .266667rem;
      height: .266667rem
    }

    .Verify-title {
      text-align: center;
      font-size: .453333rem;
      font-weight: 700;
      color: #000;
      margin-bottom: .106667rem
    }

    .Verify-number {
      margin-top: .533333rem;
      font-size: .48rem;
      color: #ff7d11;
      font-weight: 700;
      text-align: center
    }

    .Verify-content {
      height: 1.12rem;
      border: .013333rem solid #ddd;
      background: #f9f9f9;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      padding: 0 .2rem;
      margin: .4rem 0
    }

    .Verify-content input {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      display: block;
      width: 0;
      height: 100%;
      background: #f9f9f9
    }

    .Verify-content button {
      width: 2.426667rem;
      height: .666667rem;
      border-radius: .106667rem;
      font-size: .32rem;
      color: #fff;
      background: #ddd
    }

    .Verify-content button.Verify-request {
      background: #4dd962
    }

    .Verify-submit {
      height: .96rem;
      width: 7.84rem;
      color: #fff;
      border-radius: .08rem;
      font-size: .4rem;
      background: #3190e8;
      margin-bottom: .293333rem
    }

    .Verify-submit.Verify-disable {
      background: #ddd
    }

    .Verify-tip {
      margin-top: .293333rem;
      font-size: .32rem;
      color: #999;
      text-align: center
    }

    .Verify-tip .Verify-phone {
      color: #000
    }

    .Verify-tip .Verify-link {
      color: #3190e8
    }

    @-webkit-keyframes Captcha-showAlert {
      0% {
        -webkit-transform: scale(0);
        transform: scale(0)
      }
      to {
        -webkit-transform: scale(1);
        transform: scale(1)
      }
    }

    @keyframes Captcha-showAlert {
      0% {
        -webkit-transform: scale(0);
        transform: scale(0)
      }
      to {
        -webkit-transform: scale(1);
        transform: scale(1)
      }
    }

    .Captcha-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 999;
      background: rgba(0, 0, 0, .4);
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center
    }

    .Captcha-dialog {
      width: 7.733333rem;
      background: hsla(0, 0%, 100%, .9);
      border-radius: .133333rem;
      -webkit-animation: Captcha-showAlert .3s;
      animation: Captcha-showAlert .3s
    }

    .Captcha-title {
      margin: .586667rem 0;
      text-align: center;
      font-size: .533333rem;
      font-weight: 700;
      color: #000
    }

    .Captcha-captcha {
      margin: 0 .373333rem;
      background: #fff;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex
    }

    .Captcha-captcha input {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      display: block;
      width: 0;
      height: 1.146667rem;
      border: none;
      font-size: .48rem;
      padding: 0 .32rem
    }

    .Captcha-captcha img {
      margin: .12rem;
      width: 2.666667rem;
      height: .906667rem
    }

    .Captcha-error {
      margin: .266667rem .4rem;
      font-size: .346667rem;
      height: .346667rem;
      color: #ff6000
    }

    .Captcha-error img {
      vertical-align: middle;
      width: .4rem;
      height: .4rem;
      margin-right: .08rem
    }

    .Captcha-operation {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      border-top: .013333rem solid #ddd
    }

    .Captcha-operation button {
      height: 1.173333rem;
      background: none;
      font-size: .453333rem
    }

    .Captcha-operation .Captcha-cancel {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      display: block;
      width: 0;
      border-right: .013333rem solid #ddd;
      color: #666
    }

    .Captcha-operation .Captcha-ok {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      display: block;
      width: 0;
      color: #3190e8;
      font-weight: 700
    }

    .cartmask {
      position: fixed!important
    }

    .index-root {
      width: 100%;
      overflow-x: hidden
    }

    .index-scroll {
      width: 100%;

      box-sizing: content-box;
      /*height: 100vh;
      padding-right: .226667rem;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch*/
    }

    .shop-header-container {
      position: relative;
      padding-bottom: .8rem;
      color: #fff;
      font-size: .293333rem
    }

    .shop-header-background {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: #3190e8;
      background-size: cover;
      background-repeat: no-repeat
    }

    .shop-header-background:before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: rgba(119, 103, 137, .43)
    }

    .shop-header-navBar {
      position: relative;
      padding: .106667rem .266667rem
    }

    .shop-header-navBar svg {
      width: .666667rem;
      height: .666667rem
    }

    .shop-header-navBtn {
      display: inline-block
    }

    .shop-header-main {
      padding: .266667rem .4rem 0;
      position: relative;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex
    }

    .shop-header-logo {
      width: 1.733333rem;
      height: 1.733333rem;
      border: 1px solid #fff;
      border-radius: .053333rem;
      margin: 0 .266667rem 0 0
    }

    .shop-header-content {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      width: 7.2rem
    }

    .shop-header-shopName {
      margin: 0;
      font-size: .466667rem;
      line-height: 1.2em;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .shop-header-activities {
      position: absolute;
      left: .4rem;
      right: .4rem;
      bottom: .133333rem
    }

    .shop-header-activityRow {
      padding-right: 1.28rem
    }

    .shop-header-activityCount {
      position: absolute;
      top: .066667rem;
      right: 0
    }

    .shop-header-activityCount .shop-header-arrow_1uhJg_0 {
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      right: -.266667rem;
      height: .266667rem;
      width: .266667rem;
      fill: #fff
    }

    .shop-header-delivery {
      white-space: nowrap;
      height: .666667rem;
      line-height: .666667rem
    }

    .shop-header-deliveryItem {
      line-height: .32rem
    }

    .shop-header-deliveryItem:not(:last-child):after {
      content: " / ";
      opacity: .5
    }

    .shop-header-notice {
      height: .533333rem;
      line-height: .533333rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .activity-container {
      line-height: .48rem;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      font-size: .346667rem
    }

    .activity-containerNoWrap .activity-description {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis
    }

    .activity-containerNoWrap {
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center
    }

    .activity-containerNoWrap .activity-icononly {
      margin-left: .066667rem
    }

    .activity-description {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1
    }

    .activity-activityIcon {
      margin-right: 5px;
      font-size: 12px;
      font-style: normal;
      height:16px;
      width: 16px;
      display: inline-block;
      box-sizing: border-box;
      text-align: center;
      border-radius: 2px;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center
    }

    .activity-activityIcon.activity-icononly {
      margin-right: 0
    }

    .activity-hollow {
      border: 1px solid
    }

    .shop-tab-container {
      line-height: 1.066667rem;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      background-color: #fff;
      box-shadow: 0 .026667rem .053333rem 0 rgba(0, 0, 0, .06);
      margin-bottom: -1px
    }

    .shop-tab-tab {
      position: relative;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      text-align: center;
      font-size: .373333rem;
      color: #666;
      border-bottom: 1px solid #ddd
    }

    .shop-tab-active {
      color: #3190e8;
      font-weight: 700
    }

    .shop-tab-active .shop-tab-title {
      position: relative
    }

    .shop-tab-active .shop-tab-title:after {
      content: "";
      position: absolute;
      bottom: -.266667rem;
      left: 0;
      right: 0;
      height: .08rem;
      background-color: #2395ff
    }

    .index-container {
      background-color: #eee;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch
    }

    .index-rateDetail {
      background-color: #fff;
      padding: .266667rem .32rem 0;
      font-size: .36rem
    }

    .index-tagBlock {
      padding-bottom: .266667rem;
      border-bottom: 1px solid #ddd
    }

    .index-comment {
      padding: .4rem 0;
      border-bottom: .013333rem solid #ddd
    }

    .index-comment:last-child {
      border-bottom: none
    }

    .rating-tags-item {
      display: inline-block;
      padding: .2rem;
      margin: .066667rem .133333rem;
      border-radius: .133333rem;
      color: #6d7885;
      background-color: #ebf5ff
    }

    .rating-tags-unsatisfied {
      color: #aaa;
      background-color: #f5f5f5
    }

    .rating-tags-active {
      color: #fff;
      background-color: #3190e8
    }

    .rating-tags-unsatisfied.rating-tags-active {
      color: #fff;
      background-color: #ccc
    }

    .overview-container {
      background-color: #fff;
      margin-bottom: .266667rem;
      padding: .4rem;
      font-size: .36rem;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      color: #666
    }

    .overview-col1 {
      padding-right: .4rem;
      border-right: 1px solid #ddd;
      text-align: center;
      line-height: 1.5
    }

    .overview-col2 {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      font-size: .373333rem;
      line-height: 1;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center
    }

    .overview-overallScore {
      font-size: .8rem;
      line-height: 1;
      font-weight: 400;
      color: #f60;
      display: block
    }

    .overview-small {
      font-size: .266667rem;
      color: #999
    }

    .overview-line {
      width: 80%;
      margin: .133333rem 0
    }

    .overview-lineContent {
      padding-left: .266667rem
    }

    .overview-lineScore {
      color: #f60;
      padding-left: .266667rem
    }

    .rating-wrapper {
      position: relative;
      overflow: hidden;
      display: inline-block;
      vertical-align: middle
    }

    .rating-actived,
    .rating-gray {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex
    }

    .rating-actived svg,
    .rating-gray svg {
      width: 1.493333rem;
      height: .266667rem;
      -webkit-box-flex: 0;
      -webkit-flex: none;
      -ms-flex: none;
      flex: none
    }

    .rating-actived {
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden
    }

    .comment-block-container {
      position: relative;
      padding-left: 1.2rem
    }

    .comment-block-text {
      color: #333;
      font-size: .373333rem;
      margin: .213333rem 0
    }

    .comment-block-avatar {
      position: absolute;
      top: 0;
      left: 0;
      width: .8rem;
      height: .8rem;
      border-radius: 50%
    }

    .comment-block-time {
      position: absolute;
      top: .133333rem;
      right: 0;
      font-size: .32rem;
      color: #999
    }

    .comment-block-content {
      font-size: .346667rem
    }

    .comment-block-username {
      font-size: .346667rem;
      margin-top: 0;
      margin-bottom: .133333rem;
      color: #666
    }

    .comment-block-rating {
      font-size: .333333rem;
      color: #999;
      vertical-align: middle
    }

    .comment-block-reply {
      position: relative;
      margin: .266667rem 0;
      padding: .266667rem;
      background: #f3f3f3;
      border-radius: .106667rem
    }

    .comment-block-reply:after {
      content: " ";
      position: absolute;
      bottom: 100%;
      left: .4rem;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 .213333rem .213333rem;
      border-color: transparent transparent #f3f3f3
    }

    .comment-block-foods li {
      display: inline-block;
      font-size: .293333rem;
      color: #999;
      border: 1px solid #ddd;
      padding: .106667rem .266667rem;
      margin: .093333rem;
      border-radius: .08rem;
      max-width: 1.6rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .comment-block-photos li {
      display: inline-block;
      margin: .133333rem
    }

    .comment-block-photos img {
      width: 1.893333rem;
      height: 1.893333rem
    }

    .comment-intense-intense {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 101;
      background: rgba(0, 0, 0, .5);
      -webkit-transition: all .2s ease-out;
      transition: all .2s ease-out
    }

    .comment-intense-intenseActive {
      background: #000
    }

    .comment-intense-intenseBox {
      position: fixed;
      top: 0;
      left: 0;
      width: 1.893333rem;
      height: 1.893333rem;
      background: transparent;
      -webkit-transition: all .32s;
      transition: all .32s
    }

    .comment-intense-intenseBoxEnter {
      top: 0!important;
      left: 0!important;
      width: 100%;
      height: 100%
    }

    .comment-intense-intenseImg {
      width: 100%;
      position: relative;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%)
    }

    .comment-intense-intense-enter {
      -webkit-transition: all .35s;
      transition: all .35s;
      display: block
    }

    .comment-intense-intense-enter-active {
      left: 0;
      top: 0
    }

    .comment-intense-text {
      position: absolute;
      bottom: .466667rem;
      left: .266667rem;
      font-size: .266667rem;
      color: #fff
    }

    .empty-data-root {
      padding: .4rem .4rem .266667rem;
      background-color: #fff;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      margin-bottom: .266667rem
    }

    .empty-data-icon {
      width: 2.026667rem;
      height: 1.466667rem;
      margin-left: .666667rem;
      margin-right: .8rem
    }

    .empty-data-subText {
      font-size: .293333rem;
      color: #7e7e7e;
      margin-top: .133333rem
    }

    .shop-info {
      background-color: #eee;
      font-size: .346667rem;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch
    }

    .shop-info p {
      margin: 0;
      color: #666
    }

    .shop-info .shop-favor {
      float: right
    }

    .shop-info .shop-favor svg {
      width: .56rem;
      height: .466667rem;
      fill: #ddd
    }

    .shop-info .shop-favor.collectioned svg {
      fill: #3190e8
    }

    .shop-info .section {
      margin-bottom: .266667rem;
      padding: .426667rem .4rem .4rem;
      font-size: .346667rem;
      background-color: #fff;
      color: #666
    }

    .shop-info .section-title {
      color: #000;
      font-weight: 700;
      font-size: .4rem;
      line-height: .56rem
    }

    .shop-info .arrow-right {
      width: .4rem;
      height: .4rem;
      fill: #ccc;
      vertical-align: middle
    }

    .activity-activities {
      margin-top: .426667rem
    }

    .activity-activity:not(:last-child) {
      margin-bottom: .186667rem
    }

    .qualification-titleRight {
      color: #ccc;
      float: right
    }

    .qualification-content {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin-top: .4rem;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      font-size: .346667rem;
      line-height: 2
    }

    .qualification-date {
      font-size: .293333rem
    }

    .qualification-logo {
      margin: 0 .4rem;
      width: 1.333333rem;
      height: 1.333333rem
    }

    .detail-list li {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      padding: .4rem .4rem .4rem 0;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      margin-right: -.4rem
    }

    .detail-list li:not(:first-child) {
      border-top: 1px solid #ddd
    }

    .detail-list li:last-child {
      padding-bottom: 0
    }

    .detail-list li>span:first-child {
      font-weight: 700;
      color: #333
    }

    .detail-list li>span:last-child {
      max-width: 6.666667rem;
      text-align: right
    }

    .detail-license-title {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center
    }

    .album-pics {
      margin-top: .213333rem
    }

    .album-shopAlbum {
      overflow: hidden
    }

    .album-shopAlbum a {
      position: relative;
      float: left;
      overflow: hidden;
      margin-right: .186667rem;
      width: 2.08rem;
      height: 2.08rem
    }

    .album-shopAlbum a img {
      display: block;
      width: 100%;
      height: 100%
    }

    .album-albumDesc {
      display: block;
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: center;
      height: .48rem;
      line-height: .48rem;
      color: #eee;
      background-color: rgba(0, 0, 0, .6)
    }

    .bulletin-modal-container {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      border: .8rem solid transparent;
      border-top-width: 1.066667rem;
      border-bottom-width: 2.4rem;
      overflow: auto;
      background-color: #262626;
      color: #fff;
      -webkit-backdrop-filter: saturate(500%) blur(.666667rem);
      backdrop-filter: saturate(500%) blur(.666667rem)
    }

    .bulletin-modal-container h2 {
      text-align: center;
      font-size: 1.5em
    }

    .bulletin-modal-subtitle {
      text-align: center;
      margin: .8rem 0 .533333rem;
      background-image: -webkit-linear-gradient(left, #555);
      background-image: linear-gradient(90deg, #555);
      background-position: 50%;
      background-size: 100% 1px;
      background-repeat: no-repeat
    }

    .bulletin-modal-subtitle span {
      font-size: .32rem;
      padding: .133333rem .266667rem;
      border-radius: .666667rem;
      border: 1px solid #555;
      background-color: #262626
    }

    .bulletin-modal-rating {
      display: inline-block;
      -webkit-transform: scale(2);
      transform: scale(2)
    }

    .bulletin-modal-close {
      position: fixed;
      left: 0;
      right: 0;
      bottom: .666667rem;
      margin: auto;
      width: 1.2rem;
      height: 1.2rem;
      border: 1px solid #888;
      border-radius: 50%
    }

    .bulletin-modal-close svg {
      fill: #fff;
      width: 100%;
      height: 100%;
      -webkit-transform: scale(.3);
      transform: scale(.3)
    }

    .bulletin-modal-activity:not(:last-child) {
      margin-bottom: .186667rem
    }

    .modal-container {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      overflow: auto;
      z-index: 100;
      background-color: #fff
    }

    .modal-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      text-align: center;
      background-color: #2196f3;
      color: #fff;
      height: 1.173333rem;
      line-height: 1.173333rem;
      z-index: 999
    }

    .modal-title {
      font-size: .533333rem
    }

    .modal-content {
      padding-top: 1.173333rem;
      height: 100%;
      box-sizing: border-box;
      overflow: auto;
      -webkit-overflow-scrolling: touch
    }

    .modal-backIcon {
      position: absolute;
      width: .8rem;
      height: .533333rem;
      left: .106667rem;
      top: .32rem;
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
      fill: #fff
    }

    .slide-right-enter-active,
    .slide-right-leave-active {
      -webkit-transition: -webkit-transform .3s ease-out .1s;
      transition: -webkit-transform .3s ease-out .1s;
      transition: transform .3s ease-out .1s;
      transition: transform .3s ease-out .1s, -webkit-transform .3s ease-out .1s
    }

    .slide-right-enter,
    .slide-right-leave-to {
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0)
    }

    .fade-enter-active,
    .fade-leave-active {
      -webkit-transition: opacity .3s ease-out .1s;
      transition: opacity .3s ease-out .1s
    }

    .fade-enter,
    .fade-leave-to {
      opacity: 0
    }

    .license-modal-license {
      height: 100%;
      background-color: #000;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: 50%
    }

    .menuview-menuview {
      position:relative;
      height: 100%;
      box-sizing: border-box;

    }

    .menuview-menuview *,
     :after,
     :before {
      box-sizing: inherit
    }

    .menuview-menuview h3,
    .menuview-menuview p,
    .menuview-menuview ul {
      margin: 0
    }

    .menuview-menuview ul {
      padding: 0;
      list-style: none;
    }

    .menuview-menuview img {
      max-width: 100%
    }

    .menuview-menuviewMain {
      height: 100%;
      background-color: #fff
    }

    .menuview-menuviewMain.menuview-nocart,
    .menuview-menuviewMain.menuview-nocartview {
      padding-bottom: 0
    }

    .menuview-menuviewNodata {
      padding: .666667rem 0;
      text-align: center;
      font-size: .426667rem;
      color: #333;
      background-color: #eee
    }

    .menuview-menuviewNodata p {
      padding: 0;
      margin: 0;
      line-height: .853333rem
    }

    .menuview-menuviewNodata img {
      width: 40%
    }

    .menuview-main {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      height: 100%;
      width:100%;
      position:absolute;
    }

    .menuview-menuNav {
      height: 100%;
      width:78px;
      -webkit-box-flex: 0;
      -ms-flex: none;
      flex: none
    }

    .menuview-menuList {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      height: 100%;
      overflow-y:auto;
      width: 7.733333rem
    }
    .menuview-menuList .scroller{

    }

    .menuview-essentialTip {
      position: fixed;
      bottom: 2rem;
      right: .133333rem;
      color: #fff;
      padding: .133333rem .266667rem;
      box-shadow: 0 .013333rem .026667rem #ddd;
      font-size: .32rem;
      font-weight: 700;
      background-color: #ff6000;
      -webkit-appearance: none;
      outline: none;
      border: .08rem solid #fff;
      border-radius: .666667rem;
      z-index: 10;
      transition: opacity .3s ease
    }

    .menuview-essentialTip:active {
      opacity: .7
    }

    .menucategory-category {
      overflow-y: auto;
      height: 100%;
      background-color: #f8f8f8;
      -webkit-overflow-scrolling: touch
    }

    .menucategory-categoryItem {
      position: relative;
      padding: .466667rem .2rem;
      border-bottom: 1px solid #ededed;
      font-size: .346667rem;
      color: #666
    }

    .menucategory-categoryItem.menucategory-active {
      background-color: #fff;
      border-right-color: #fff;
      font-weight: bolder
    }

    .menucategory-categoryItem.menucategory-active:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: .08rem;
      background-color: #3190e8
    }

    .menucategory-categoryItem:not(.menucategory-hasicon) .menucategory-categoryName {
      line-height: 1.2em;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical
    }

    .menucategory-categoryQuantity {
      position: absolute;
      right: .08rem;
      top: .08rem;
      color: #fff;
      background-color: #ff461d;
      border-radius: .2rem;
      font-size: .266667rem;
      font-weight: 700;
      text-align: center;
      min-width: .373333rem;
      padding: 0 .106667rem;
      line-height: .373333rem
    }

    .menucategory-categoryIcon {
      width: .24rem;
      height: .333333rem
    }

    .cartview-cartview {
      font-size: .426667rem
    }

    .cartview-cartbody {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #fff;
      -webkit-transition: -webkit-transform .3s ease;
      transition: -webkit-transform .3s ease;
      transition: transform .3s ease;
      transition: transform .3s ease, -webkit-transform .3s ease;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
      bottom: 1.813333rem
    }

    .cartview-cartbodyNoTip {
      bottom: 40px
    }

    .cartview-cartbodyOpen {
      bottom: 40px;
      padding-bottom:10px;
    }

    .cartview-cartbodyEnterActive,
    .cartview-cartbodyLeave,
    .cartview-cartbodyOpen {
      -webkit-transform: translateZ(0);
      transform: translateZ(0)
    }

    .cartview-cartbodyEnter,
    .cartview-cartbodyLeaveActive {
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0)
    }

    .cartview-cartmask {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: #000;
      opacity: .4;
      -webkit-transition: opacity .3s ease;
      transition: opacity .3s ease
    }

    .cartview-cartmaskEnterActive,
    .cartview-cartmaskLeave {
      opacity: .4
    }

    .cartview-cartmaskEnter,
    .cartview-cartmaskLeaveActive {
      opacity: 0
    }

    .cartview-cartheader {
      padding: 0 .333333rem;
      border-bottom: 1px solid #ddd;
      background-color: #eceff1;
      color: #666;
      line-height: 1.066667rem
    }

    .cartview-cartheaderText {
      padding-left: .133333rem;
      border-left: .093333rem solid #3190e8
    }

    .cartview-cartheaderRemove {
      float: right;
      padding-left: .4rem;
      background-size: .266667rem;
      color: #666;
      text-decoration: none;
      font-size: .346667rem
    }

    .cartview-cartheaderRemove svg {
      width: .306667rem;
      height: .346667rem;
      fill: #ddd
    }

    .discount-tip-discountTip {
      background-color: #fffad6;
      border-top: 1px solid #f9e8a3;
      opacity: .96;
      line-height: .533333rem;
      font-size: .266667rem;
      text-align: center
    }

    .discount-tip-discountTip span {
      color: #ff461d
    }

    .entityList-cartbodyScroller {
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      max-height: 8rem
    }

    cartlist {
      margin: 0;
      padding: 0
    }

    .entityList-entityrow {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      padding: .2rem .333333rem .2rem 0;
      min-height: 1.466667rem;
      margin-left: .333333rem
    }

    .entityList-entityrow:not(:last-child) {
      border-bottom: 1px solid #eee
    }

    .entityList-entityrow.entityList-packingfee {
      border-top: 1px solid #eee
    }

    .entityList-entityname {
      -webkit-box-flex: 5.5;
      -webkit-flex: 5.5;
      -ms-flex: 5.5;
      flex: 5.5;
      line-height: normal
    }

    .entityList-entityname.entityList-hasstocktip .entityList-name {
      max-width: 2.666667rem
    }

    .entityList-entityname .entityList-name {
      display: inline-block;
      font-style: normal;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: middle;
      max-width: 4.666667rem
    }

    .entityList-entityname .entityList-stocktip {
      font-style: normal;
      display: inline-block;
      vertical-align: middle;
      padding: 0 .066667rem;
      background-color: #ff461d;
      border-radius: .053333rem;
      line-height: .373333rem;
      color: #fff;
      font-size: .28rem
    }

    .entityList-entityname .entityList-flashtip {
      display: block;
      margin-top: .066667rem;
      font-style: normal;
      color: #999;
      font-size: .266667rem
    }

    .entityList-entityspecs {
      white-space: nowrap;
      line-height: .333333rem;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #999;
      font-size: .266667rem
    }

    .entityList-entitytotal {
      -webkit-box-flex: 2.5;
      -webkit-flex: 2.5;
      -ms-flex: 2.5;
      flex: 2.5;
      color: #f60;
      text-align: right;
      white-space: nowrap;
      font-weight: 700
    }

    .entityList-entitytotalDiscount:before {
      content: "\A5";
      font-size: .266667rem;
      color: currentColor
    }

    .entityList-entitytotalOriginal {
      margin-right: .133333rem;
      font-size: .266667rem;
      color: #999;
      font-weight: 400
    }

    .entityList-entitycartbutton {
      -webkit-box-flex: 3;
      -webkit-flex: 3;
      -ms-flex: 3;
      flex: 3;
      text-align: right
    }

    .entityList-piecewiseTips {
      padding: .133333rem 0;
      margin-left: .333333rem;
      font-size: .266667rem;
      color: #999;
      border-bottom: .013333rem solid #eee
    }

    .entityList-piecewiseTips b {
      display: inline-block;
      margin-right: .066667rem;
      padding: 0 .066667rem;
      font-weight: 400;
      color: #ff461d;
      border: 1px solid #ff461d;
      border-radius: .053333rem;
      font-size: .266667rem
    }

    .entityList-weight {
      font-size: .32rem;
      color: #666
    }

    .bottomNav-cartfooter {
      position: fixed;
      right: 0;
      bottom: 0;
      left: 0;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      padding-left: 2.106667rem;
      background-color: rgba(61, 61, 63, .9);
      -webkit-backdrop-filter: blur(.266667rem);
      height: 1.28rem
    }

    .bottomNav-carticon {
      position: absolute;
      left: .32rem;
      bottom: .2rem;
      width: 1.333333rem;
      height: 1.333333rem;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border-radius: 100%;
      background-color: #3190e8;
      border: .133333rem solid #444;
      -webkit-box-shadow: 0 -.08rem .053333rem 0 rgba(0, 0, 0, .1);
      box-shadow: 0 -.08rem .053333rem 0 rgba(0, 0, 0, .1);
      will-change: transform
    }

    .bottomNav-carticon:before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: url() 50% no-repeat;
      background-size: .6rem;
      content: ""
    }

    .bottomNav-carticon.bottomNav-empty {
      background-image: -webkit-radial-gradient(circle, #363636 .626667rem, #444 0);
      background-image: radial-gradient(circle, #363636 .626667rem, #444 0)
    }

    .bottomNav-carticon.bottomNav-empty:before {
      background-image: url()
    }

    .bottomNav-carticon.bottomNav-empty:after {
      visibility: hidden
    }

    .bottomNav-carticon:after {
      position: absolute;
      right: -.12rem;
      top: -.133333rem;
      line-height: 1;
      background-color: #ff461d;
      color: #fff;
      border-radius: .32rem;
      padding: .053333rem .133333rem;
      content: attr(attr-quantity);
      font-size: .266667rem
    }

    .bottomNav-carticon.bottomNav-shake {
      -webkit-animation: bottomNav-shake_2waDn_0 .5s ease-in-out;
      animation: bottomNav-shake_2waDn_0 .5s ease-in-out
    }

    @-webkit-keyframes bottomNav-shake {
      0% {
        -webkit-transform: scale(1);
        transform: scale(1)
      }
      25% {
        -webkit-transform: scale(.8);
        transform: scale(.8)
      }
      50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
      }
      75% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
      }
      to {
        -webkit-transform: scale(1);
        transform: scale(1)
      }
    }

    @keyframes bottomNav-shake {
      0% {
        -webkit-transform: scale(1);
        transform: scale(1)
      }
      25% {
        -webkit-transform: scale(.8);
        transform: scale(.8)
      }
      50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
      }
      75% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
      }
      to {
        -webkit-transform: scale(1);
        transform: scale(1)
      }
    }

    .bottomNav-cartInfo {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1
    }

    .bottomNav-carttotal {
      font-size: .48rem;
      line-height: normal;
      color: #fff
    }

    .bottomNav-carttotalOriginal {
      font-size: .8em;
      opacity: .8
    }

    .bottomNav-cartdelivery {
      color: #f5f5f5;
      font-size: .266667rem
    }

    .bottomNav-cartextra {
      border-left: 1px solid #666;
      margin-left: .133333rem;
      padding-left: .133333rem;
      font-size: .32rem;
      color: #999;
      display: table
    }

    .bottomNav-cartextra em {
      font-style: normal
    }

    .submit-btn-submitbutton {
      height: 100%;
      width: 2.8rem;
      background-color: #4cd964;
      color: #fff;
      text-align: center;
      text-decoration: none;
      font-size: .4rem;
      font-weight: 700;
      line-height: 1.28rem
    }

    .submit-btn-submitbutton small {
      font-size: .293333rem;
      display: block
    }

    .submit-btn-submitbutton.submit-btn-disabled {
      background-color: #535356
    }

    .submit-btn-submitbutton.submit-btn-multiLine {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      line-height: 1.3
    }

    .container {
      position: relative;
      height: 100%
    }

    .container .scroller {
      /*height: 100%;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch*/
    }

    dl.onlyddst dd {
      margin-left: 0;
      box-shadow: 0 1px 0 0 #ddd
    }

    dl.onlylist .foodprice {
      font-size: .533333rem
    }

    dl.onlylist .foodimg {
      -webkit-box-flex: 0;
      -ms-flex: none;
      flex: none;
      width: 2.133333rem;
      height: 2.133333rem
    }

    dl.onlylist .foodtitle {
      font-size: .48rem
    }

    dl.onlylist dd {
      padding: .333333rem;
      min-height: none
    }

    dl {
      margin: 0
    }

    dd {
      position: relative;
      margin: 0;
      box-shadow: .4rem 1px 0 0 #ddd
    }

    .menuview-menuList dt[role='heading']{
      position: relative;
      padding: .2rem .8rem .2rem .266667rem;
      background-color: #f1f1f1
    }

    .category-title {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: end;
      -ms-flex-align: end;
      align-items: flex-end;
      overflow: hidden
    }

    .category-title strong {
      margin-right: .133333rem;
      font-weight: 700;
      font-size: .373333rem;
      color: #666;
      -webkit-box-flex: 0;
      -ms-flex: none;
      flex: none
    }

    .category-title span.category-description {
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      color: #999;
      font-size: .266667rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .category-more .icon {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: .933333rem;
      z-index: 2;
      background: #f1f1f1 url() 50% no-repeat;
      background-size: .32rem auto
    }

    .category-more .popup {
      position: absolute;
      background-color: #39373a;
      opacity: .97;
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transform-origin: top right;
      transform-origin: top right;
      width: 63%;
      right: .133333rem;
      z-index: 3;
      color: #eee;
      font-size: .32rem;
      border-radius: .106667rem;
      padding: .24rem .266667rem;
      transition: all .3s ease;
      cursor: pointer
    }

    .category-more .popup:before {
      content: "";
      position: absolute;
      top: 0;
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
      right: .266667rem;
      border: .133333rem solid transparent;
      border-bottom-color: #39373a
    }

    .category-more .popup span:first-child {
      color: #fff
    }

    .category-more .popup-enter,
    .category-more .popup-leave {
      opacity: 0!important;
      -webkit-transform: scale(.5)!important;
      transform: scale(.5)!important
    }

    .category-more:after {
      content: "";
      position: absolute
    }

    .foodpanel {
      width: 100vw;
      height: 100vh;
      position: fixed;
      z-index: 12
    }

    .fade-enter-active,
    .fade-leave-active {
      transition: all .5s
    }

    .fade-enter,
    .fade-leave-to {
      opacity: 0
    }

    .flyball {
      z-index: 14
    }

    .specpanel-specpanel,
    .specpanel-specpanel * {
      -webkit-box-sizing: border-box;
      box-sizing: border-box
    }

    .specpanel-container {
      position: relative;
      z-index: 9999
    }

    .specpanel-specpanel {
      position: fixed;
      top: 50%;
      left: 10%;
      right: 10%;
      -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
      transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
      transition: transform .3s ease-in-out, opacity .3s ease-in-out;
      transition: transform .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
      -webkit-transform: translate3d(0, -50%, 0) scale(1);
      transform: translate3d(0, -50%, 0) scale(1);
      overflow: auto;
      background-color: #fff;
      border-radius: .106667rem;
      z-index: 1;
      opacity: 1
    }

    .specpanel-specpanelOpen {
      -webkit-transform: translate3d(0, -50%, 0) scale(.1);
      transform: translate3d(0, -50%, 0) scale(.1);
      opacity: 0
    }

    .specpanel-layer {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width:100vw;
      height:100vh;
      background: rgba(0, 0, 0, .5);
      -webkit-transition: opacity .3s ease-in-out;
      transition: opacity .3s ease-in-out;
      opacity: 1
    }

    .specpanel-layerOpen {
      opacity: 0
    }

    .specpanel-specpanel h1 {
      margin: 0;
      text-align: center;
      background-color: inherit;
      color: #333;
      font-size: .426667rem;
      line-height: .6rem;
      padding: .333333rem .8rem
    }

    .specpanel-close {
      display: block;
      position: absolute;
      top: .4rem;
      right: .4rem;
      width: .466667rem;
      height: .466667rem;
      background: url() no-repeat;
      background-size: cover
    }

    .specpanel-candidators {
      max-height: 6.666667rem;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 0 0 .533333rem .4rem
    }

    .specpanel-candidatorsGroup:not(:last-child) {
      margin-bottom: .466667rem
    }

    .specpanel-candidators h2 {
      font-size: .346667rem;
      color: #666;
      line-height: .533333rem
    }

    .specpanel-candidator {
      display: inline-block;
      vertical-align: middle;
      white-space: nowrap;
      border: 1px solid #999;
      border-radius: .533333rem;
      margin: .173333rem .4rem 0 0;
      padding: 0 .24rem;
      min-width: 1.333333rem;
      line-height: .64rem;
      height: .64rem;
      font-size: .346667rem;
      text-decoration: none;
      text-align: center;
      color: #666
    }

    .specpanel-candidator[disabled] {
      border-color: #ccc;
      color: #ccc
    }

    .specpanel-candidator.specpanel-selected {
      font-weight: 700;
      color: #3199e8;
      border-color: #3199e8;
      background-color: #f6fbff
    }

    .specpanel-cartadd {
      outline: none;
      border: none;
      -webkit-appearance: none;
      font-size: .373333rem;
      color: #fff;
      padding: 0 .333333rem;
      text-align: center;
      line-height: .866667rem;
      border-radius: .08rem;
      background-color: #3199e8;
      text-decoration: none
    }

    .specpanel-cartadd:active {
      background-color: #82c3f4
    }

    .specpanel-cartadd.specpanel-disabled,
    .specpanel-cartadd.specpanel-disabled:active {
      background-color: #ccc
    }

    .specpanel-selectedresult {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      padding: .333333rem .4rem;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      background-color: #f9f9f9
    }

    .specpanel-stockstr {
      display: inline-block;
      font-size: .32rem;
      color: #fff;
      background-color: #999;
      border-radius: .08rem;
      margin-left: .16rem;
      padding: .053333rem .08rem;
      vertical-align: middle
    }

    .specpanel-price {
      font-size: .56rem;
      line-height: 1;
      color: #ff6000
    }

    .specpanel-price .specpanel-yen {
      position: relative;
      font-size: .293333rem;
      top: -.04rem;
      margin-right: -.133333rem;
      vertical-align: bottom
    }

    .specpanel-price .specpanel-now {
      font-weight: 700
    }

    .specpanel-price .specpanel-extratext {
      font-size: .293333rem;
      color: #999
    }

    .specpanel-price .specpanel-origin {
      position: relative;
      top: .066667rem;
      font-size: .32rem;
      color: #666;
      vertical-align: top
    }

    .specpanel-minPurchase {
      color: #666;
      font-size: .266667rem;
      margin-right: .133333rem
    }

    .fooddetails-food-panel-0 {
      background-color: #fff;
      padding: .4rem .266667rem;
      margin-bottom: 1px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      min-height: 2.933333rem;
      position: relative
    }

    .fooddetails-cart-button-0 {
      position: absolute;
      right: 0;
      bottom: -.066667rem
    }

    .fooddetails-food-img-0 {
      margin-right: -30%;
      width: 30%;
      vertical-align: top
    }

    .fooddetails-food-img-0 img {
      width: 100%;
      border-radius: .053333rem
    }

    .fooddetails-food-info-0 {
      position: relative;
      width: 100%;
      padding-bottom: .666667rem;
      padding-left: calc(30% + .266667rem)
    }

    .fooddetails-food-title {
      font-size: .4rem;
      font-weight: 700;
      line-height: 1.1;
      overflow: hidden;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between
    }

    .fooddetails-food-title span {
      vertical-align: middle
    }

    .fooddetails-food-attributes-0 span,
    .fooddetails-food-attributes-1 span,
    .fooddetails-food-attributes-2 span {
      width: .64rem;
      height: .346667rem;
      background: linear-gradient(135deg, #ffae1b, #f57751);
      display: inline-block;
      vertical-align: top;
      font-size: .266667rem;
      color: #fff;
      letter-spacing: 0;
      line-height: .346667rem;
      margin-right: .026667rem;
      text-align: center
    }

    .fooddetails-food-attributes-0 span.fooddetails-new_food,
    .fooddetails-food-attributes-1 span.fooddetails-new_food,
    .fooddetails-food-attributes-2 span.fooddetails-new_food {
      background-image: linear-gradient(135deg, #7ae336, #00c180)
    }

    .fooddetails-food-attributes-0 span.fooddetails-chili,
    .fooddetails-food-attributes-1 span.fooddetails-chili,
    .fooddetails-food-attributes-2 span.fooddetails-chili {
      position: absolute;
      right: 0;
      width: .346667rem;
      background: url() no-repeat;
      background-size: contain
    }

    .fooddetails-food-attributes-0 {
      line-height: 0;
      position: absolute;
      left: 0;
      right: 0
    }

    .fooddetails-quantity-tip-0 {
      background-color: #ff461d;
      border-radius: .053333rem;
      font-size: .266667rem;
      color: #fff;
      padding: .026667rem .066667rem;
      vertical-align: middle
    }

    .fooddetails-food-description {
      margin: .133333rem 0!important;
      font-size: .253333rem;
      color: #999
    }

    .fooddetails-food-sales-0 {
      margin: .173333rem 0!important;
      color: #666;
      font-size: .293333rem;
      line-height: 1
    }

    .fooddetails-food-sales-0 p {
      margin-right: .106667rem
    }

    .fooddetails-food-sales-0 span {
      vertical-align: middle
    }

    .fooddetails-food-sales-0>span:not(:first-child) {
      margin-left: .106667rem;
      vertical-align: middle
    }

    .fooddetails-food-activity-0,
    .fooddetails-food-activity-1,
    .fooddetails-food-activity-2 {
      font-size: .293333rem;
      -webkit-transform: scale(.8);
      transform: scale(.8);
      -webkit-transform-origin: left;
      transform-origin: left;
      color: #f07373;
      white-space: nowrap
    }

    .fooddetails-food-activity-0 span,
    .fooddetails-food-activity-1 span,
    .fooddetails-food-activity-2 span {
      vertical-align: top;
      line-height: .346667rem;
      height: .346667rem;
      padding: 0 .08rem;
      border: .013333rem solid #ff3c15
    }

    .fooddetails-food-activity-0 span:first-child,
    .fooddetails-food-activity-1 span:first-child,
    .fooddetails-food-activity-2 span:first-child {
      background-image: linear-gradient(90deg, #ff7416, #ff3c15 98%);
      border-radius: .013333rem;
      font-size: .266667rem;
      color: #fff;
      letter-spacing: 0
    }

    .fooddetails-food-activity-0 span {
      display: inline-block
    }

    .fooddetails-food-status-0:before {
      content: "";
      background-image: linear-gradient(135deg, #4cd964 50%, transparent 0);
      position: absolute;
      width: .746667rem;
      height: .746667rem;
      z-index: 1;
      left: 0;
      top: -1px;
      font-weight: 700;
      font-size: .24rem
    }

    .fooddetails-food-status-0 span {
      z-index: 2;
      position: absolute;
      left: .013333rem;
      top: .12rem;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      color: #fff;
      font-size: .226667rem
    }

    .fooddetails-food-price-0,
    .fooddetails-food-price-1,
    .fooddetails-food-price-2 {
      position: absolute;
      bottom: 0;
      font-weight: 700;
      font-size: .426667rem;
      line-height: .426667rem;
      color: #f60;
      padding: .093333rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: baseline;
      -ms-flex-align: baseline;
      align-items: baseline
    }

    .fooddetails-food-price-0 span:first-child,
    .fooddetails-food-price-1 span:first-child,
    .fooddetails-food-price-2 span:first-child {
      margin-right: .106667rem
    }

    .fooddetails-food-price-0:before,
    .fooddetails-food-price-1:before,
    .fooddetails-food-price-2:before {
      font-weight: 400;
      content: "\A5";
      font-size: .293333rem;
      display: inline-block
    }

    .fooddetails-food-price-lowest {
      font-weight: 500;
      font-size: .266667rem;
      color: #ff5339
    }

    .fooddetails-food-price-origin {
      font-size: .266667rem;
      color: #999;
      font-weight: 400;
      vertical-align: top
    }

    .fooddetails-quantity-tip {
      font-size: .253333rem;
      color: #999
    }

    .fooddetails-food-panel-wrap-1 {
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-backdrop-filter: blur(.133333rem);
      backdrop-filter: blur(.133333rem)
    }

    .fooddetails-food-panel-1,
    .fooddetails-food-panel-2,
    .fooddetails-food-panel-wrap-1 {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column
    }

    .fooddetails-food-panel-1,
    .fooddetails-food-panel-2 {
      position: relative;
      background-color: #fff;
      margin-left: 0;
      transition-origin: 0 0;
      transition: all .3s ease-in-out
    }

    .fooddetails-food-panel-1 {
      background: #fff;
      box-shadow: 0 .013333rem .08rem 0 rgba(0, 0, 0, .1);
      width: 8.533333rem;
      height: 11.413333rem;
      border-radius: .106667rem;
      z-index: 13;
      opacity: 1;
      box-shadow: inherit!important;
      padding: 0;
      margin: auto
    }

    .fooddetails-food-panel-close-1 {
      position: absolute;
      top: -.794667rem;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      color: #fff;
      opacity: 0
    }

    .fooddetails-food-img-1,
    .fooddetails-food-img-2 {
      width: 100%;
      height: 8.533333rem;
      display: block;
      overflow: hidden;
      position: relative;
      border-radius: .106667rem .106667rem 0 0
    }

    .fooddetails-food-img-1.fooddetails-food-img-2:after,
    .fooddetails-food-img-1.fooddetails-hasShadow:before,
    .fooddetails-food-img-2.fooddetails-food-img-2:after,
    .fooddetails-food-img-2.fooddetails-hasShadow:before {
      content: "";
      display: block;
      position: absolute;
      bottom: 0;
      width: 100%
    }

    .fooddetails-food-img-1.fooddetails-hasShadow:before,
    .fooddetails-food-img-2.fooddetails-hasShadow:before {
      height: 3.2rem;
      background: linear-gradient(transparent, rgba(0, 0, 0, .3))
    }

    .fooddetails-food-img-1.fooddetails-food-img-2:after,
    .fooddetails-food-img-2.fooddetails-food-img-2:after {
      top: 0;
      height: 20%;
      background: linear-gradient(rgba(0, 0, 0, .3), transparent) 100%
    }

    .fooddetails-food-img-1 img,
    .fooddetails-food-img-2 img {
      width: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain
    }

    .fooddetails-food-info-1,
    .fooddetails-food-info-2 {
      position: relative;
      padding: .4rem;
      width: 100%;
      height: 2.88rem
    }

    .fooddetails-food-info-1 header,
    .fooddetails-food-info-1 p:not(.fooddetails-food-description-1),
    .fooddetails-food-info-2 header,
    .fooddetails-food-info-2 p:not(.fooddetails-food-description-1) {
      margin-bottom: .16rem
    }

    .fooddetails-food-info-1 header span,
    .fooddetails-food-info-2 header span {
      font-size: .426667rem;
      color: #333;
      letter-spacing: 0;
      line-height: .426667rem
    }

    .fooddetails-food-attributes-1,
    .fooddetails-food-attributes-2 {
      float: left;
      margin-right: .133333rem;
      margin-top: .04rem
    }

    .fooddetails-food-attributes-1 span.fooddetails-chili,
    .fooddetails-food-attributes-2 span.fooddetails-chili {
      right: .4rem
    }

    .fooddetails-food-description-1,
    .fooddetails-food-description-2 {
      font-size: .293333rem;
      color: #ddd;
      letter-spacing: 0;
      line-height: .373333rem;
      position: absolute;
      bottom: 3.146667rem
    }

    .fooddetails-food-sales-1,
    .fooddetails-food-sales-2 {
      font-family: PingFangSC-Regular;
      font-size: .293333rem;
      color: #666;
      line-height: .293333rem
    }

    .fooddetails-food-price-1,
    .fooddetails-food-price-2 {
      left: 1em;
      top: 2.013333rem;
      color: #ff461d
    }

    .fooddetails-cart-button-1,
    .fooddetails-cart-button-2 {
      position: absolute;
      bottom: 10px;
      right: 10px
    }

    .fooddetails-food-panel-marker-1,
    .fooddetails-food-panel-marker-2 {
      position: fixed;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, .5);
      top: 0;
      left: 0
    }

    .fooddetails-food-panel-2 {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      overflow-y: auto;
      -webkit-transform: none;
      transform: none;
      border-radius: 0;
      background-color: #fff;
      margin: auto;
      z-index: 1
    }

    .fooddetails-food-panel-close-2 {
      position: fixed;
      top: .8em;
      left: .5em;
      color: #fff;
      z-index: 1;
      font-size: 2em
    }

    .fooddetails-food-img-2 {
      width: 10rem;
      height: 10rem;
      display: block;
      overflow: hidden
    }

    .fooddetails-food-panel-marker-2 {
      background-color: #fff
    }

    .cartbutton-entitybutton {
      display: inline-block;
      font-size: .346667rem;
      white-space: nowrap
    }

    .cartbutton-entitybutton a {
      display: inline-block;
      padding: .093333rem;
      vertical-align: middle;
      text-decoration: none
    }

    .cartbutton-entitybutton svg {
      width: 20px;
      height: 20px;
      vertical-align: middle;
      fill: #3190e8
    }

    [data-dpr="2"] .cartbutton-entitybutton svg {
      width: 40px;
      height: 40px
    }

    [data-dpr="3"] .cartbutton-entitybutton svg {
      width: 60px;
      height: 60px
    }

    .cartbutton-entitybutton a[disabled] svg {
      fill: #ddd
    }

    .cartbutton-entitybutton .cartbutton-specadd[disabled] .cartbutton-entityspecbutton {
      background-color: #ddd
    }

    .cartbutton-entitybutton.cartbutton-soldout {
      color: #999
    }

    .cartbutton-entityquantity {
      display: inline-block;
      text-align: center;
      color: #666;
      vertical-align: middle;
      font-size: .373333rem;
      min-width: .4rem;
      max-width: 2em;
      overflow: hidden
    }

    .cartbutton-entityspecbutton {
      display: inline-block;
      vertical-align: middle;
      color: #fff;
      background-color: #3199e8;
      text-decoration: none;
      padding: 0 .2rem;
      font-size: .32rem;
      border-radius: .346667rem;
      line-height: .666667rem
    }

    .cartbutton-minPurchase {
      font-size: .266667rem;
      color: #666
    }

    .flyball {
      position: fixed;
      top: 0;
      left: 0
    }

    .flyball .inner {
      position: absolute;
      top: 0;
      left: 0;
      background-color: #3190e8;
      border-radius: 50%
    }

    .flyball,
    .flyball .inner {
      will-change: transform;
      -webkit-transform: translateZ(0);
      transform: translateZ(0)
    }

    .flyball {
      -webkit-transition: -webkit-transform .5s linear;
      transition: -webkit-transform .5s linear;
      transition: transform .5s linear;
      transition: transform .5s linear, -webkit-transform .5s linear
    }

    .flyball .inner {
      -webkit-transition: -webkit-transform .5s cubic-bezier(.3, -.2, 1, 0);
      transition: -webkit-transform .5s cubic-bezier(.3, -.2, 1, 0);
      transition: transform .5s cubic-bezier(.3, -.2, 1, 0);
      transition: transform .5s cubic-bezier(.3, -.2, 1, 0), -webkit-transform .5s cubic-bezier(.3, -.2, 1, 0)
    }
</style>
